<template>
  <view class="container">
    <view class="list-container">
      <view 
        class="list-item" 
        v-for="(item, index) in hospitalList" 
        :key="index"
        @tap="goToHospitalDetail(item)"
      >
        <image :src="config.staticUrl + (item.imgUrl || '/static/images/default-hospital.png')" mode="aspectFill" class="item-image"></image>
        <view class="item-info">
          <text class="item-name">{{ item.name }}</text>
          <text class="item-detail">{{ item.hospitalGrade }} | {{ item.diseaseType }}</text>
          <text class="item-address">{{ item.address }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getHospitalByBiseaseType } from '@/api/hospital'
import config from '@/config'

export default {
  data() {
    return {
      hospitalList: [],
      config: config,
      searchHistory: []
    }
  },
  onLoad() {
    this.loadSearchHistory()
    this.loadHospitalList()
  },
  methods: {
    loadSearchHistory() {
      this.searchHistory = uni.getStorageSync('searchHistory') || []
    },
    async loadHospitalList() {
      try {
        const res = await getHospitalByBiseaseType()
        if (res.code === 200 && Array.isArray(res.data)) {
          if (this.searchHistory.length > 0) {
            // 如果有搜索历史，优先显示匹配的结果
            const filtered = res.data.filter(item => {
              return this.searchHistory.some(keyword => {
                const lowerCaseKeyword = keyword.toLowerCase()
                return ['name', 'address', 'snapshot', 'hospitalGrade', 'diseaseType'].some(field => {
                  const value = item[field]
                  return value && String(value).toLowerCase().includes(lowerCaseKeyword)
                })
              })
            })
            this.hospitalList = filtered.length > 0 ? filtered : res.data
          } else {
            this.hospitalList = res.data
          }
        }
      } catch (error) {
        console.error('获取医院列表失败:', error)
        uni.showToast({
          title: '获取医院列表失败',
          icon: 'none'
        })
      }
    },
    goToHospitalDetail(item) {
      if (item.id) {
        uni.navigateTo({
          url: `/pages/hospital/detail?id=${item.id}`,
          success: (res) => {
            res.eventChannel.emit('hospitalData', item)
          }
        })
      }
    }
  }
}
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #F5F6FA;
  min-height: 100vh;
}

.list-container {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.list-item {
  display: flex;
  background-color: #FFFFFF;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  padding: 24rpx;
  align-items: center;
}

/* 浅色背景 */
/* .bg-hospital-light { background-color: #e6f7ff; } */

.item-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 12rpx;
  margin-right: 20rpx;
}

.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.item-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 8rpx;
}

.item-detail {
  font-size: 26rpx;
  color: #666666;
  margin-bottom: 4rpx;
}

.item-address {
  font-size: 24rpx;
  color: #999999;
}
</style> 